<template>
  <view class="minePage">
    <view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>

    <!-- 个人信息 -->
    <view class="avatarVue margin0 flex-between align-center" v-if="isLogin">
      <view class="flex align-center">
        <image
          src="../../static/logo.jpg"
          style="width: 82rpx; height: 82rpx; border-radius: 50%"
        ></image>
        <view class="flex-column flex-between">
          <text class="name" v-if="user.phone">{{ user.phone | conceal() }}</text>
          <text class="name" v-else>{{ user.username }}</text>
        </view>
      </view>
    </view>
    <view class="avatarVue margin0 flex-between align-center" v-else>
      <view class="flex align-center" @click="$tools.route('../login/login')">
        <image
          src="../../static/user.png"
          style="width: 82rpx; height: 82rpx; border-radius: 50%"
        ></image>
        <text class="name">登录</text>
      </view>
    </view>
    <u-gap height="30"></u-gap>

    <!-- 我的会员 -->
    <view class="vipVue margin0" v-if="isLogin">
      <view class="label">我的会员</view>
      <view class="flex-between align-center margin20">
        <text>当前会员等级</text>
        <text style="color: #FFA0A0">{{user.membershipName ? user.membershipName : "基础会员"}}</text>
      </view>
      <view class="button-vip-invite">
        <view class="btn margin30" @click="$tools.navigate('./vip')"
          >购买会员</view
        >
      </view>
    </view>

    <!-- 我的邀请 -->
    <view class="vipVue margin30" v-if="isLogin">
    	<view class="label">我的邀请</view>
    	<view class="flex-between align-center margin20">
    		<text>当前邀请人数</text>
    		<text style="color: #FFA0A0;">{{inviteNum}}</text>
    	</view>
    	<view class="button-vip-invite">
    		<view class="btn margin30" @click="$tools.navigate('./invite')">邀请详情</view>
    	</view>
    </view>

    <!-- 积分管理 -->
    <view class="pointVue margin30">
		<view class="label">积分管理</view>
		<view class="flex-between margin20">
			<view class="info flex-column flex-between">
				<text style="color: #333">AI视频</text>
				<text style="color: #FFA0A0; font-weight: 600; font-size: 30rpx">{{ isLogin ? aiVideoPoints : 0 }}</text>
			</view>
			<view class="info flex-column flex-between">
				<text style="color: #333">AI微信</text>
				<text style="color: #FFA0A0; font-weight: 600; font-size: 30rpx">{{ isLogin ? aiWechatPoints : 0 }}</text>
			</view>
		</view>
		<view class="flex-between margin20">
			<view class="li" @click="$tools.navigate('./charge')">积分充值</view>
			<view class="li" @click="$tools.navigate('./record')">积分记录</view>
		</view>
    </view>

    <!-- 兑换码 -->
    <view class="exchangeVue margin30" v-if="isLogin">
		<view class="flex-between">
			<view class="label">兑换码</view>
			<text style="color: #FFA0A0; text-decoration: underline; font-size: 26rpx" @click="$tools.navigate('./exchange')">兑换管理</text>
		</view>
		<view class="flex margin20 align-center">
			<input type="text" placeholder="请输入兑换码" v-model="code" />
			<view class="btn" @click="getRedemptionCode()">兑换</view>
		</view>
    </view>

    <!-- 我的管理 -->
    <view class="myManageVue margin30">
		<view class="li flex-between align-center" @click="$tools.navigate('./myVideo')">
			<text>我的视频管理</text>
			<image src="../../static/more.png" style="width: 40rpx; height: 40rpx"></image>
		</view>
		<view class="li flex-between align-center" @click="$tools.navigate('./myVoice')">
			<text>我的声音管理</text>
			<image src="../../static/more.png" style="width: 40rpx; height: 40rpx"></image>
		</view>
		<view class="li flex-between align-center" style="position: relative;">
			<button open-type="contact" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></button>
			<text>联系客服</text>
			<image src="../../static/more.png" style="width: 40rpx; height: 40rpx"></image>
		</view>
		<view class="li flex-between align-center noBorder" @click="$tools.navigate('./setup')">
			<text>设置</text>
			<image src="../../static/more.png" style="width: 40rpx; height: 40rpx"></image>
		</view>
    </view>
    <u-gap height="30"></u-gap>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			aiVideoPoints: 0,
			aiWechatPoints: 0,
			code: "",
			safeTop: 0,
			statusBarHeight: 0,
			inviteNum: 0,
		};
	},

	computed: {
		...mapState({
			isLogin: (state) => state.isLogin,
			user: (state) => state.user,
		}),
	},

	onLoad() {
		this.getInviteNumber();
		let that = this;
		wx.getSystemInfo({
			success(res) {
				console.log(res);
				that.statusBarHeight = that.$utils.pxTorpx(res.statusBarHeight);
			},
		});
	},
	async onShow() {
		await this.getPoint();
	},
	methods: {
		// 获取邀请人数
		async getInviteNumber() {
		    const res = await this.$request("/aiet-user-center/user/getSubUserList",{page: 0,size: 10}, "POST", "application/json");
		    if (res.code === 200) {
		        console.log("邀请人数", res);
		        this.inviteNum = res.data.content.length;
			}
		},

		// 获取积分
		async getPoint() {
			const res = await this.$request("/aiet-user-center/user/points/summary", {}, "GET");
			if (res.code === 200) {
				this.aiVideoPoints = res.data.aiVideoPoints;
				this.aiWechatPoints = res.data.aiWechatPoints;
			}
		},

		// 使用兑换码
		async getPoint() {
			const res = await this.$request("/aiet-user-center/user/points/summary", {}, "GET");
			if (res.code === 200) {
				this.aiVideoPoints = res.data.aiVideoPoints;
				this.aiWechatPoints = res.data.aiWechatPoints;
			}
		},

		// 使用兑换码
		async getRedemptionCode() {
			if (!this.user.phone) {
				this.$u.toast("请先绑定手机号");
				setTimeout(() => {
					this.$tools.route("./setup");
				}, 1000);
				return;
			}
			if (!this.code) return this.$u.toast("兑换码不能为空");
			uni.showLoading();
			try {
				const res = await this.$request("/aiet-user-center/user/redemptionCode/update", {
					code: this.code,
					used: true,
					usedId: this.user.id,
				}, "PUT");
				if (res.code === 200) {
					uni.hideLoading();
					this.code = "";
					this.getPoint();
					this.$u.toast("兑换成功");
				} else {
					uni.hideLoading();
					this.$u.toast(res.msg);
				}
			} catch (error) {
				uni.hideLoading();
				if (error.statusCode === 500) {
					this.$u.toast("该兑换码不存在");
				} else {
					this.$u.toast("兑换失败，请稍后再试");
				}
			}
		},
	},
};
</script>

<style lang="less" scoped>
.minePage {
  width: 100%;
  height: 100%;

  .safeVue {
    width: 100%;
    height: var(--status-bar-height);
    background: #FFA0A0;
  }

  .avatarVue {
    width: 100%;
    background: #FFA0A0;
    padding: 0 30rpx 20rpx;

    .name {
      color: #333;
      font-weight: 600;
      padding-left: 15rpx;
      line-height: 1;
    }
  }

  .logouBtn {
    width: 520rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background: #FFA0A0;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
  }

  .vipVue {
    width: 690rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      font-weight: 700;
      font-size: 30rpx;
      color: #000;
    }

    .btn {
      width: 100%;
      height: 78rpx;
      background: #FFA0A0;
      text-align: center;
      line-height: 78rpx;
      color: #fff;
      border-radius: 20rpx;
    }
  }

  .pointVue {
    width: 690rpx;
    border-radius: 12rpx;
    background: #fff;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      color: #000;
      font-weight: 600;
    }

    .info {
      width: 300rpx;
      height: 150rpx;
      background: linear-gradient(90deg, rgba(255, 208, 208, 1) 0%, rgba(255, 208, 208, 0.36) 100%);
      border-radius: 12rpx;
      padding: 30rpx;
    }

    .li {
      width: 300rpx;
      height: 76rpx;
      text-align: center;
      line-height: 76rpx;
      color: #fff;
      background: #FFA0A0;
      border-radius: 10rpx;
    }

    .li:nth-child(2) {
      color: #fff;
      background: #FFA0A0;
    }
  }

  .exchangeVue {
    width: 690rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      font-weight: 700;
      font-size: 30rpx;
      color: #000;
    }

    input {
      flex: 1;
      height: 80rpx;
      border: 1rpx solid #f5f5f5;
      border-radius: 12rpx;
      padding-left: 20rpx;
      font-size: 28rpx;
    }

    .btn {
      width: 100rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      background: #FFA0A0;
      border-radius: 12rpx;
      margin-left: 30rpx;
    }
  }

  .myManageVue {
    width: 690rpx;
    border-radius: 12rpx;
    background: #fff;
    padding: 0 20rpx;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
      inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);

    .label {
      color: #000;
      font-weight: 600;
    }

    .li {
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #f5f5f5;

      text {
        color: #333;
      }
    }

    .noBorder {
      border: none;
    }
  }
}
</style>
